<template>
  <div class="header">
      <span class="iconfont" @click="toPage">&#xe601;</span>
      <span>确认订单</span>
  </div>

  <div class="banner">
      <p class="banner_title">收货地址</p>
      <p class="banner_address">北京理工大学国防科技园2号楼10层</p>
      <p class="banner_phone">瑶妹（先生）18911024266</p>
      <span class="iconfont">&#xe601;</span>
  </div>

  <div class="main">
  <SpgCartItem :list='list'></SpgCartItem>
  </div>

<div class="tabber">
    <div class="tabber_left">实付金额 <span>￥{{priceSum}}</span></div>
    <div class="tabber_right" @click="submit">提交订单</div>
</div>

<Mask v-if="payShow"></Mask>

<Dialog v-if="payShow">
  <div class="dialog_content">
    <p class="dialog_content_title">订单提交成功</p>
    <p class="dialog_content_text">请尽快完成支付，否则将被取消</p>
    <div class="dialog_content_button"><button class="off" @click="confirm(true)">取消订单</button><button class="ok" @click="confirm(false)">确认支付</button></div>
  </div>
</Dialog>

<Dialog v-if="payOkShow">
  <div class="dialog_content">
    <span class="iconfont yes">&#xe8bd;</span>
    <span class="iconfont close" @click="close">&#xe8e7;</span>
    <p class="payok_text">支付成功，等待配送</p>
    <router-link :to='{name:"MyOrder"}'>
    <button class="to_my_order">查看订单</button>
    </router-link>
  </div>
</Dialog>

<Toast v-if="data.toastShow" :toastText='data.toastText'/>
</template>

<script>
import { ref } from '@vue/reactivity'
import { useRoute, useRouter } from 'vue-router'
import SpgCartItem from '../../components/spgCartItem/spgCartItem.vue'
import Mask from '../../components/mask/mask.vue'
import Dialog from '../../components/dialog/dialog.vue'
import { ajax } from '../../assets/js/public.js'
import { watch } from '@vue/runtime-core'
import Toast, { userToastEffect } from '../../components/toast/toast.vue'
import store from '@/store'

const list = ref([])
const priceSum = ref(0)
const payShow = ref(false)
const payOkShow = ref(false)
const content = ref([])
const isPay = ref(false)
let products = []
export default {
  name: 'Order',
  components: {
    SpgCartItem,
    Mask,
    Dialog,
    Toast
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    const { data, toastShow } = userToastEffect()
    init()
    // 返回上一页
    const toPage = () => {
      router.back()
    }
    // 提交订单按钮
    const submit = () => {
      payShow.value = true
    }

    // 确认支付按钮
    const confirm = (bl) => {
      const options = {
        url: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/order',
        type: 'post',
        data: {
          addressId: '1',
          shopId: route.params.id,
          shopName: list.value[0].key,
          isCanceled: bl,
          products: products
        },
        list: content
      }
      ajax(options)
      // eslint-disable-next-line no-unused-expressions
      bl ? (payShow.value = false, isPay.value = false, toastShow('订单已取消'), store.commit('setMyOrderList', orderList(false)))
        : (isPay.value = true, store.commit('setMyOrderList', orderList(true)))
    }

    const close = () => {
      payOkShow.value = false
      payShow.value = false
    }
    return { list, toPage, priceSum, payShow, submit, confirm, payOkShow, close, data }
  }
}
const init = () => {
  const route = useRoute()
  const id = route.params.id
  list.value = []
  payShow.value = false
  payOkShow.value = false
  priceSum.value = 0
  products = []
  let key = ''
  const ls = JSON.parse(localStorage.getItem(`ls${id}`))
  switch (id) {
    case '1': key = '沃尔玛'; break
    case '2': key = '山姆会员店'; break
    case '3': key = '盒马超市'; break
    case '4': key = '京东7FRESH七鲜'; break
    case '5': key = '百果园'; break
  }
  const item = {
    id: id,
    sum: sumAdd(ls),
    key: key,
    value: ls
  }
  list.value.push(item)
}
const sumAdd = ls => {
  let sum = 0
  for (const i of ls) {
    sum = sum + i.sum
    priceSum.value = Number((priceSum.value + i.sum * i.price).toFixed(2))
    products.push({
      id: i._id,
      num: i.sum
    })
  }
  return sum
}

watch(content, () => {
  isPay.value ? payOkShow.value = true : payOkShow.value = false
  store.commit('setStorage')
})

const orderList = type => {
  const myOrderList = {
    shopName: list.value[0].key,
    sum: list.value[0].sum,
    priceSum: priceSum.value,
    type: type ? '交易成功' : '订单已取消',
    imgList: addImgUrl()
  }
  return myOrderList
}
const addImgUrl = () => {
  const imgUrl = []
  for (const i of list.value[0].value) {
    imgUrl.push(i.imgUrl)
  }
  return imgUrl
}
</script>

<style lang='scss' scoped>
 .header{
     box-sizing: border-box;
     width: 100%;
     height: 1.59rem;
     padding: .31rem .18rem 0;
     background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, #0091FF 50%);
     font-size: .16rem;
     color: #FFFFFF;
     .iconfont{
         font-size: .22rem;
         margin-right: 1.2rem;
     }
 }
 .banner{
     box-sizing: border-box;
     height: 1.11rem;
     margin: 0 .18rem;
     padding: .16rem .16rem 0;
     background: #FFFFFF;
     border-radius: 4px;
     position: absolute;
     top: .8rem;
     left: 0;
     right: 0;
     z-index: 2;
     p{
         margin: 0;
         }
     &_title{
         font-size: .16rem;
         font-weight: bold;
         padding-bottom: .14rem;
     }
     &_address{
         font-size: .14rem;
         padding-bottom: .1rem;
     }
     &_phone{
         font-size: .12rem;
         color: #666666;
 }
 .iconfont{
     display: inline-block;
     transform: rotate(180deg);
     font-size: .18rem;
     position: absolute;
     top: .48rem;
     right: .16rem;
 }
 }
 .main{
    overflow-y: auto;
    position: absolute;
    top: 1.59rem;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    padding: .53rem .18rem .49rem;
 }
 .tabber{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .49rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .14rem;
    span{
        font-size: .16rem;
        font-weight: bold;
        color: #e93b3b;
    }
    &_left{
        margin-left: .24rem;
    }
    &_right{
        width: .98rem;
        height: .49rem;
        background-color: #4FB0F9;
        text-align: center;
        line-height: .49rem;
        color: #ffffff;
    }
 }
 .dialog_content{
   box-sizing: border-box;
   width: 3.01rem;
   height: 1.57rem;
   text-align: center;
   font-size: .14rem;
   &_title{
     font-size: .18rem;
     font-weight: bold;
     margin:.3rem 0 .2rem;
   }
   &_text{
     color: #666666;
     margin-bottom: .35rem;
   }
   &_button{
    button{
      width: .8rem;
      height: .32rem;
      border: 1px solid #4FB0F9;
      border-radius: .16rem;
    }
    .off{
      margin-right: .24rem;
      color: #0091FF;
      background-color: #ffffff;
    }
    .ok{
      background-color: #4FB0F9;
      color: #ffffff;
    }
   }
   .yes{
     display: inline-block;
     font-size: .5rem;
     color: green;
     margin-top: .05rem;
   }
   .payok_text{
     font-size: .18rem;
   }
   .close{
     font-size: .26rem;
     position: absolute;
     right: .15rem;
   }
 }
 .to_my_order{
   width: .8rem;
      height: .32rem;
      border: 1px solid green;
      border-radius: .16rem;
      background-color: green;
      color: #ffffff;
 }
</style>
